<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery滚动条美化Scrollbar设置浏览器默认滚动条样式 DIVCSS5 在线演示</title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="scrollbar.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none; }
a,img{border:0;}
body{font-size:12px; background:#26C2B4; text-align:center}
a{color:#333;text-decoration:none;}
a:hover{color:#ff6600;text-decoration:underline;}
/* newslist */
.newslist{padding:10px; margin:0 auto; text-align:left}
.newslist li{height:32px;line-height:32px;border-bottom:dashed 1px #FFF;padding:0 10px;overflow:hidden;}
/* scr_con style */
.scr_con {position:relative;height:330px;border:solid 1px #FFF;width:350px;margin:20px auto;}
#dv_scroll{position:absolute;height:310px;overflow:hidden;width:320px;}
#dv_scroll .Scroller-Container{width:100%;}
#dv_scroll_bar {position:absolute;right:0;top:10px;width:15px;height:310px;border-left:2px solid #FFF;}
#dv_scroll_bar .Scrollbar-Track{position:absolute;left:0;top:20px;width:15px;height:270px;}
#dv_scroll_bar .Scrollbar-Handle{position:absolute;left:-8px;top:0;width:15px;height:29px;overflow:hidden;background:url('http://www.divcss5.com/yanshi/2014/2014060401/images/srcoll.gif') no-repeat;cursor:pointer;}
#dv_scroll_text {position:absolute;}

/* 以下CSS与特效无关 */
#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
#n a{ padding:0 4px; color:#333}
</style>
</head>

<body>
<p id="n"><a href="http://www.divcss5.com/">CSS</a>
<a href="http://www.divcss5.com/">divcss5</a>：
<a href="http://www.divcss5.com/html/">Html基础</a>
<a href="http://www.divcss5.com/htmlrumen/">html入门</a>
<a href="http://www.divcss5.com/rumen/">CSS基础</a>
<a href="http://www.divcss5.com/cssrumen/">CSS入门</a>
<a href="http://www.divcss5.com/css-hack/">CSS Hack</a>
<a href="http://www.divcss5.com/css-texiao/">CSS特效</a>
<a href="http://www.divcss5.com/template/">CSS模块</a>
<a href="http://www.divcss5.com/wenji/">CSS知答</a>
<a href="http://www.divcss5.com/peixun/">CSS培训</a>
<a href="http://www.css5.com.cn/">CSS切图</a>
<a href="http://www.divcss5.com/css-tool/">CSS工具</a>
<a href="http://www.divcss5.com/jiqiao/">CSS技巧</a>
<a href="http://www.divcss5.com/">DIV+CSS</a></p>
<p>&nbsp;</p>
<!-- 以上DIV与特效无关 -->

<div class="scr_con">
	<div id="dv_scroll">
		<div id="dv_scroll_text" class="Scroller-Container">
			<div class="newslist">
				<ul>
					<li><a href="http://www.divcss5.com/css-texiao/texiao690.shtml">简单JQ回到顶部特效 开始不显示下拉网页出现回到顶部图标JS特效</a></li>
					<li><a href="http://www.divcss5.com/css-texiao/texiao686.shtml">jquery DIV CSS JQ文字标题焦点幻灯片特效</a></li>
					<li><a href="http://www.divcss5.com/css-texiao/texiao685.shtml">jquery动感滑动蓝色导航CSS菜单 仿flash动感滑动特效菜单</a></li>
					<li><a href="http://www.divcss5.com/css-texiao/texiao683.shtml">JQ+CSS3上传文件表单6种美化上传表单</a></li>
					<li><a href="http://www.divcss5.com/css-texiao/texiao676.shtml">DIV+CSS+JQ仿淘宝宝贝细节图片展示放大镜特效多图细节</a></li>
					<li><a href="http://www.divcss5.com/css-texiao/texiao664.shtml">jqueryCSS DIV带圆点按钮可控制左右滚动焦点图文幻灯片特效</a></li>
					<li><a href="http://www.divcss5.com/css-texiao/texiao656.shtml">DIV+CSS图片不间断滚动jquery特效不停从右往左滚动图片特效</a></li>
					<li><a href="http://www.divcss5.com/css-texiao/texiao638.shtml">从右到左每次滚动一个图片 可控制左右不间断滚动JQ+CSS特效</a></li>
					<li><a href="http://www.divcss5.com/css-texiao/texiao618.shtml">JQ+CSS+DIV多彩随机变化链接样式tag标签样式</a></li>
					<li><a href="http://www.divcss5.com/css-texiao/texiao590.shtml">JQ超炫切换带文字的焦点幻灯片特效HTML5+CSS</a></li>
					<li><a href="http://www.divcss5.com/template/m693.shtml">DIV+CSS居中分页代码 居中的CSS分页排版代码</a></li>
					<li><a href="http://www.divcss5.com/template/m578.shtml">HTML编辑器-HTML网页表单可视化在线编辑器插件大全</a></li>
					<li><a href="http://www.divcss5.com/template/m234.shtml">div css Tab菜单</a></li>
					<li><a href="http://www.divcss5.com/css-texiao/texiao495.shtml">顶部下拉显示层DIV+CSS+JS特效</a></li>
				</ul>				
			</div><!--about end-->
		</div>
	</div><!--dv_scroll end-->
	<div id="dv_scroll_bar">
		<div id="dv_scroll_track" class="Scrollbar-Track">
			<div class="Scrollbar-Handle"></div>
		</div>
	</div><!--dv_scroll_bar end-->
</div><!--scr_con end-->

<!-- 以下DIV与特效无关 -->
<p>返回 <a href="http://www.divcss5.com/css-texiao/texiao695.shtml">div css滚动条美化特效</a>：<a href="http://www.divcss5.com/css-texiao/texiao695.shtml">http://www.divcss5.com/css-texiao/texiao695.shtml</a></p>
</body>
</html>
